<script setup>
import { ref, reactive, onMounted } from "vue";
import * as XLSX from 'xlsx'
import dayjs from "dayjs";
import { useRouter, useRoute } from "vue-router";
import { Message } from "@arco-design/web-vue";
import planApi from "@/api/planApi";
import summaryApi from "@/api/summaryApi";
import statisticsApi from "@/api/statisticsApi";
import scoreTemplateApi from "@/api/scoreTemplateApi";
import GradeSummary from "@/components/charts/GradeSummary.vue";
import ProjectSummary from "@/components/charts/ProjectSummary.vue";
import ClassesSummary from "@/components/charts/ClassesSummary.vue";
import PlanSummary from "@/components/charts/PlanSummary.vue";
import QrcodeVue from "qrcode.vue";
import tool from "@/utils/tool";
import * as echarts from 'echarts'
import { Workbook } from 'exceljs/dist/exceljs.min.js'
const router = useRouter();
const route = useRoute();
const params = history.state.params;
let plan = ref({});
const defaultExpandedkeys = ref([]);
const visible = ref(false);
const optionVisible = ref(false);
const showResitVisible = ref(false);
const optionTitle = ref("");

const loading = ref(false);
const loadCountData = ref(false);
const loadingStudent = ref(false);

const studentData = ref([]);
const gradeData = ref([]);
const projectData = ref([]);
const submitResitForm = ref();
const submitResitData = ref({
  parentId: params.planId
})

const scroll = ref({
  x: 200,
  y: 600
})

const summary = ref({
  totalCount: 0,
  testCount: 0,
  freeTestCount: 0,
  bestCount: 0,
  bestRate: 0.0,
  wellCount: 0,
  wellRate: 0.0,
  passCount: 0,
  passRate: 0.0,
  noPassCount: 0,
  noPassRate: 0.0,
});
const summaryData = ref({
  school: {},
  classesCount: 0,
  studentCount: 0,
  manCount: 0,
  womanCOunt: 0,
});
const templates = ref([]);

const searchStdModel = ref({
  planId: params.planId
})

const searchStudent = () => {
  if (!searchStdModel.value.studyCode) {
    return;
  }
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, searchStdModel.value),
  };
  loadingStudent.value = true;
  planApi.pageStudent(params).then((res) => {
    studentData.value = res.records;
    pagination.total = res.total;
    loadingStudent.value = false;
  });
};

const selectedKeys = ref([]);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});

const startEndDateChange = (dates) => {
  if (dates && dates.length == 2) {
    var startDate = dayjs(dates[0], "YYYY-MM-dd");
    var startMonth = startDate.month();
    submitResitData.value.startDate = dates[0];
    submitResitData.value.endDate = dates[1];
    if (startMonth + 1 >= 9) {
      submitResitData.value.schoolYear = startDate.year().toString();
    } else {
      submitResitData.value.schoolYear = (startDate.year() - 1).toString();
    }
  } else {
    submitResitData.value.schoolYear = "";
    submitResitData.value.startDate = "";
    submitResitData.value.endDate = "";
  }
};

const clearDates = () => {
  submitResitData.value.schoolYear = "";
  submitResitData.value.startDate = "";
  submitResitData.value.endDate = "";
};

const customRequest = (option) => {
  const { onProgress, onError, onSuccess, fileItem, name } = option
  let filObj = fileItem.file;
  const fileReader = new FileReader()

  // .readAsArrayBuffer, 读取指定的 Blob 或 File 内容
  fileReader.readAsArrayBuffer(filObj)
  fileReader.onload = event => {
    const fileData = event.target.result

    // 从电子表格字节中提取数据
    const workbook = XLSX.read(fileData, {
      type: 'binary'
    })

    // 选项卡顺序列出工作表名称
    const wsname = workbook.SheetNames[0]

    // 从工作表创建JS 值数组
    const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    let studyCodes = [];
    sheetJson.forEach(item => {
      studyCodes.push(item.学籍号);
    })

    planApi.queryPlanStdByStudyCodes({
      planId: params.planId,
      studyCodes: studyCodes
    }).then(res => {
      studentData.value = res;
      pagination.total = res.length;
      pagination.current = 1;
    });

  }
}

const getSummaryCardColor = (key) => {
  let color = "blue";
  switch (key) {
    case "totalCount":
    case "bestCount":
    case "passCount":
    case "wellCount":
      color = "yellow";
      break;
  }
  return color;
};
const redValueStyle = {
  color: "red",
};
const getSummaryTitle = (key) => {
  let title = "";
  switch (key) {
    case "totalCount":
      title = "学生人数（人）";
      break;
    case "testCount":
      title = "实测人数（人）";
      break;
    case "freeTestCount":
      title = "免测人数（人）";
      break;
    case "bestCount":
      title = "优秀人数（人）";
      break;
    case "bestRate":
      title = "优秀率（%）";
      break;
    case "wellCount":
      title = "良好人数（人）";
      break;
    case "wellRate":
      title = "良好率（%）";
      break;
    case "passCount":
      title = "及格人数（人）";
      break;
    case "passRate":
      title = "及格率（%）";
      break;
    case "noPassCount":
      title = "不及格人数（人）";
      break;
    case "noPassRate":
      title = "不及格率（%）";
      break;
  }
  return title;
};

const queryAll = () => {
  getSummaryData();
  querySummaryGroupData();
}

const getSummaryData = () => {
  loading.value = true;
  planApi.summaryData(params).then((res) => {
    summaryData.value = res;
    loading.value = false;
  });
};

const querySummaryGroupData = () => {
  loadCountData.value = true;
  summaryApi.queryData(searchGroupParam).then((res) => {
    summary.value = Object.assign(summary.value, res.summary);
    console.log('Grade data structure:', res.grade); // 添加日志
    gradeData.value = res.grade;
    projectData.value = res.project;
    loadCountData.value = false;
  });
};

let schoolList = ref([]);
let gradeClassesList = ref([]);
let classesList = ref([]);

let permissions = tool.data.get('permissions');

const optionData = ref({
  password: "",
  planId: params.planId,
});

const searchModel = ref({
  planId: params.planId,
});


let searchGroupParam = reactive({
  planId: params.planId,
  schoolId: "",
  gradeId: ""
})

const exportLoading = ref(false);

const exportToExcel = async () => {
  if (exportLoading.value) return;
  exportLoading.value = true;
  statisticsApi.downloadReport({
    planId:params.planId,
    schoolId:schoolList.value.length == 1 ? schoolList.value[0].id : ""
  }).then(res => {
    const content = res.data;
    const blob = new Blob([content], { type: "application/octet-stream" });
    let suixx = ".pdf";
    const fileName =
      "体质健康测试分析报告-" + dayjs().format("YYYYMMDDHHmmss") + suixx;

    if (typeof window.navigator.msSaveBlob !== "undefined") {
      window.navigator.msSaveBlob(blob, fileName);
    } else {
      const fileUrl = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = fileUrl;
      a.target = "_blank";
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    exportLoading.value = false;
  }).catch(err => {
    exportLoading.value = false;
  })
};

const openResitDialog = () => {
  showResitVisible.value = true;
  submitResitData.value.parentId = params.planId;
}

const hasPermission = (code) => {
  return permissions.includes(code);
}

// const menus = ref([
//   {name:'考生管理',code:"",icon:""}
// ])

const getSchoolList = () => {
  planApi
    .getSchoolList({
      planId: params.planId,
    })
    .then((res) => {
      schoolList.value = res;
      if (schoolList.value.length >= 1) {
        let schoolId = schoolList.value[0].id;
        queryGradeBySchoolId(schoolId);
        searchModel.value.schoolId = schoolId;
        searchGroupParam.schoolId = schoolId;
        getSummaryData();
        querySummaryGroupData();
      }
    });
};

const queryGradeBySchoolId = (schoolId) => {
  planApi
    .getGradeClassesList({
      planId: params.planId,
      schoolId: schoolId,
    })
    .then((res) => {
      gradeClassesList.value = res;
    });
}

const schoolSelectChange = (schoolId) => {
  if (schoolId) {
    queryGradeBySchoolId(schoolId);
    getSummaryData();
    querySummaryGroupData();
  } else {
    gradeClassesList.value = [];
    classesList.value = [];
    searchModel.classesId = "";
    searchModel.gradeId = "";
  }
};

const handleSubmitResit = (values) => {
  values.userId = tool.data.get("loginId");
  values.studyCodes = selectedKeys.value;
  planApi.saveResit(values).then((res) => {
    Message.success("保存成功");
    showResitVisible.value = false;
  });
};

const handleSubmitOption = (values) => {
  let examFlag = plan.value.examFlag;
  values.optionType = optionTitle.value == "结束" ? "end" : "delete";
  values.userId = tool.data.get("loginId");
  planApi.setState(values).then((res) => {
    Message.success("操作成功");
    optionVisible.value = false;
    if (examFlag) {
      router.push({
        name: 'examPlan'
      });
    } else {
      router.push({
        name: 'plan'
      });
    }
  });
};

const queryPlanDetailById = () => {
  planApi.detailById(params).then((resp) => {
    plan.value = resp;
  });
}

const skipPlanItem = (code) => {
  router.push({
    name: code,
    state: {
      params,
    },
  });
};

const submitData = ref({});
const submitCameraIpInfo = ref({});
const submitForm = ref();
const optionForm = ref();
let schoolData = ref([]);

const endPlan = () => {
  optionVisible.value = true;
  optionTitle.value = "结束";
};

const deletePlan = () => {
  optionVisible.value = true;
  optionTitle.value = "删除";
};

const editPlan = () => {
  planApi.detailById(params).then((res) => {
    visible.value = true;
    submitForm.value.resetFields();
    submitData.value = res;
    submitData.value.dates = [res.startDate, res.endDate];
  });
};

const handleSubmitSuccess = (values) => {
  planApi.save(values).then((res) => {
    visible.value = false;
    Message.success("保存成功");
  });
};

let pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
  showPageSize: true,
  pageSizeOptions: [15, 25, 30, 50],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    searchStudent();
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    searchStudent();
  },
});

const columns = [
  {
    title: "学生姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "性别",
    slotName: "sex",
    width: 100,
  },
  {
    title: "年级",
    dataIndex: "gradeName",
    width: 100,
  },
  {
    title: "班级",
    dataIndex: "classesName",
    width: 100,
  },
  {
    title: "学籍号",
    dataIndex: "studyCode",
    width: 200,
  }
];

const openDataScreen = () => {
  window.open('http://datav.sqcoe.com/?code=' + plan.value.code);
}

const queryTemplates = () => {
  scoreTemplateApi.queryList().then(res => {
    templates.value = res;
  })
}
const setCameraIpDialog = ref(false);
const showSetCameraIpDialog = () => {
  setCameraIpDialog.value = true;
  submitCameraIpInfo.value.cameraIp = "";
}

const updateCameraIp = () => {
  submitCameraIpInfo.value.id = plan.value.id;
  planApi.updateCameraIp(submitCameraIpInfo.value).then(res => {
    Message.success("设置成功");
  });
}

const archiving = ref(false);
const archive = () => {
  archiving.value = true;
  planApi.archive({
    schoolYear: plan.value.schoolYear,
    planId: plan.value.id
  }).then(res => {
    Message.success("归档成功");
    archiving.value = false;
  })
}

const gradeChartRef = ref(null)
const projectChartRef = ref(null)
const classChartRef = ref(null)

onMounted(() => {
  queryTemplates();
  getSchoolList();
  queryPlanDetailById();
});
</script>
<template>
  <div class="main-con">
    <a-card>
      <div class="flex flex-v-center" style="font-size: 12px">
        <a-space wrap>

          <div style="color: #000000; font-weight: 600; font-size: 14px">
            {{ plan.name }}
          </div>
          <div style="color: #999; " class="flex flex-v-center">
            计划编码：<span style="color: #4e5969">{{ plan.code }}</span>

            <a-popover title="">
              <a-button type="text" size="large">
                <template #icon>
                  <icon-qrcode />
                </template>
              </a-button>
              <template #content>
                <qrcode-vue v-if="plan.code" :value="plan.code" :size="120" level="H" />
              </template>
            </a-popover>

          </div>
          <a-divider direction="vertical" />
          <div>
            <span>学校数量 {{ plan.schoolNum }}</span>
            <span style="margin-left: 16px;">学生数量 {{ plan.studentNum }}</span>
          </div>
          <a-divider direction="vertical" />
          <div style="color: #999">
            起止时间
            <span style="color: #4e5969">{{ plan.startDate }} ~ {{ plan.endDate }}</span>
          </div>
          <a-divider direction="vertical" />
          <div style="color: #999; ">
            <a-tag color="blue">{{
              plan.state == 1
                ? "未开始"
                : plan.state == 2
                  ? "进行中"
                  : plan.state == 3
                    ? "已结束"
                    : "已关闭"
            }}</a-tag>
          </div>
          <a-divider direction="vertical" />
          <div style="color: #999; ">
            <a-tag color="blue">{{ plan.templateName }}</a-tag>
          </div>
        </a-space>
      </div>
      <div style=" margin-top: 16px">
        <a-space wrap>
          <a-button v-if="hasPermission('editPlan')" :disabled="plan.state != 1" size="mini" type="primary"
            @click="editPlan">
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-button v-if="hasPermission('endPlan')" :disabled="plan.state != 2" size="mini" type="primary"
            status="warning" @click="endPlan">
            <template #icon>
              <icon-poweroff />
            </template>
            结束
          </a-button>
          <a-button v-if="hasPermission('deletePlan')" size="mini" :disabled="plan.state != 1" type="primary"
            status="warning" @click="deletePlan">
            <template #icon>
              <icon-delete />
            </template>
            删除
          </a-button>

          <a-button v-if="plan.examFlag && plan.parentId == 0 && (!plan.childPlans || plan.childPlans.length == 0)"
            size="mini" type="primary" status="info" @click="openResitDialog">
            <template #icon>
              <icon-branch />
            </template>
            新增缓考计划
          </a-button>

          <a-button type="outline" size="mini" status="info" @click="showSetCameraIpDialog">
            设置视频流地址
          </a-button>
          <div v-if="plan.code" style="color: #999;" class="flex flex-v-center">
            <a-popover title="">
              <a-button type="outline" size="mini" @click="openDataScreen">
                数据大屏
                <template #icon>
                  <icon-qrcode />
                </template>
              </a-button>
              <template #content>
                <qrcode-vue v-if="plan.code" :value="'http://datav.sqcoe.com/?code=' + plan.code" :size="120"
                  level="H" />
              </template>
            </a-popover>

          </div>
          <div v-if="plan.resultQueryUrl" style="color: #999;" class="flex flex-v-center">

            <a-popover title="">
              <a-button type="outline" size="mini">
                成绩查询H5
                <template #icon>
                  <icon-qrcode />
                </template>
              </a-button>
              <template #content>
                <qrcode-vue v-if="plan.resultQueryUrl" :value="plan.resultQueryUrl" :size="120" level="H" />
              </template>
            </a-popover>

          </div>

          <a-tag v-if="plan.examFlag && plan.childPlans && plan.childPlans.length > 0" size="mini" type="primary"
            status="info">
            存在缓考计划
          </a-tag>

          <a-button v-if="!plan.examFlag" :loading="archiving" type="primary" size="mini" status="info"
            @click="archive">
            <template #icon><icon-file /></template>
            {{ archiving ? '正在归档...' : '成绩归档' }}
          </a-button>

          <a-button type="primary" :loading="exportLoading" size="mini" status="info" @click="exportToExcel">
            <template #icon><icon-file /></template>
            下载分析报告
          </a-button>

          <a-button v-if="hasPermission('plan:archive')" type="primary" size="mini" @click="archive"
            :loading="archiving">
            <template #icon><icon-file /></template>
            {{ archiving ? '正在归档...' : '成绩归档' }}
          </a-button>

        </a-space>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <a-tabs default-active-key="dashboard">
        <a-tab-pane key="dashboard" title="工作台">
          <div style="padding: 20px">
            <a-grid :cols="{ xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 4 }" :colGap="16" :rowGap="16"
              class="grid-demo-grid">
              <a-grid-item v-if="hasPermission('planStudent')" class="option-item" @click="skipPlanItem('planStudent')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/icon_candidate_Mgt@2x-537d0d98.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">考生管理</div>
                    <div>考生和测试人员信息管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.openReservation" class="option-item" @click="skipPlanItem('planReservation')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/reservation.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">预约管理</div>
                    <div>学生自主预约体测</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('planApply')" class="option-item"
                @click="skipPlanItem('planApply')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/apply.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">报名报项</div>
                    <div>报名报项管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item class="option-item" @click="skipPlanItem('planFreeApply')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/免测.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">{{ plan.examFlag ? '免考管理' : '免测管理' }}</div>
                    <div>{{ plan.examFlag ? '免考' : '免测' }}人员管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('planArrange')" class="option-item"
                @click="skipPlanItem('planArrange')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/arrange.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">考试编排</div>
                    <div>考试编排管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('planCheckIn')" class="option-item"
                @click="skipPlanItem('planCheckIn')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/record.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">信息检录</div>
                    <div>考前信息检录</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('planPublicity')" class="option-item"
                @click="skipPlanItem('planPublicity')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/jxiao.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">成绩公示</div>
                    <div>考试成绩公示</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="!plan.examFlag" class="option-item" @click="skipPlanItem('healthPublicity')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/jxiao.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">成绩公示</div>
                    <div>体测成绩公示</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('applyForArbitration')" class="option-item"
                @click="skipPlanItem('applyForArbitration')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/applyForArbitration.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">申请仲裁</div>
                    <div>申请仲裁操作</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('reviewForArbitration')" class="option-item"
                @click="skipPlanItem('reviewForArbitration')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/reviewForArbitration.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">仲裁审核</div>
                    <div>审核仲裁操作</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="hasPermission('planResult')" class="option-item" @click="skipPlanItem('planResult')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/icon_upload_update@2x-d381aa79.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">成绩上传及更新记录</div>
                    <div>成绩上传及更新记录的信息管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="hasPermission('planSummary')" class="option-item" @click="skipPlanItem('planSummary')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/icon_grade_mat@2x-c8eaa536.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">成绩汇总查询</div>
                    <div>对计划内的体测成绩进行管理</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="hasPermission('planSummaryScore')" class="option-item"
                @click="skipPlanItem('planSummaryScore')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/icon_grade_announcement@2x-f85d1c02.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">成绩评分等级汇总</div>
                    <div>对计划内的体测成绩评分等级汇总</div>
                  </div>
                </div>
              </a-grid-item>
              <a-grid-item v-if="plan.examFlag && hasPermission('videoConfig')" class="option-item"
                @click="skipPlanItem('videoConfig')">
                <div class="flex flex-v-center">
                  <div class="img-wrap">
                    <img src="@/assets/videoConfig.png" alt="" />
                  </div>
                  <div class="content flex1">
                    <div class="title">视频设备管理</div>
                    <div>视频设备管理</div>
                  </div>
                </div>
              </a-grid-item>
            </a-grid>
          </div>
        </a-tab-pane>
        <a-tab-pane key="dataPreview" title="数据总览">
          <div style="background-color: #f9f9f9">
            <div class="statistic-card">
              <div class="header flex flex-v-center">
                <div>整体进度</div>
              </div>
              <div class="card-content">
                <a-grid :cols="{ xs: 2, sm: 4, md: 4, lg: 4, xl: 5, xxl: 6 }" :colGap="20" :rowGap="16">
                  <template v-for="(data, key) in summary" :key="key">
                    <a-grid-item v-if="getSummaryTitle(key)" class="flex">
                      <div :class="[getSummaryCardColor(key)]" class="flex flex1">
                        <a-statistic :title="getSummaryTitle(key)" :value="data" :precision="0" :value-from="0"
                          :start="true" animation class="custom-statistic" :value-style="key == 'noPassCount' || key == 'noPassRate'
                            ? redValueStyle
                            : {}
                            ">
                        </a-statistic>
                      </div>
                    </a-grid-item>
                  </template>
                </a-grid>
              </div>
            </div>
            <a-card style="margin-top: 16px">
              <template #title>
                <div style="font-size: 20px; font-weight: 600">体测数据统计</div>
              </template>
              <template #extra>
                <a-space>
                  <a-select style="width: 450px" v-model="searchGroupParam.schoolId" placeholder="请选择学校" allow-clear
                    @change="schoolSelectChange">
                    <a-option v-for="school in schoolList" :value="school.id" :key="school.id"
                      :label="school.name"></a-option>
                  </a-select>
                  <a-select style="width: 120px" v-model="searchGroupParam.gradeId" placeholder="年级">
                    <a-option value="">全部</a-option>
                    <a-option v-for="item in gradeClassesList" :key="item.id" :value="item.id">{{ item.name
                      }}</a-option>
                  </a-select>
                  <a-button type="primary" @click="queryAll">查询</a-button>
                </a-space>
              </template>

              <a-spin :loading="loadCountData" style="width: 100%">
                <div class="statistic-card" style="margin-top: 0">
                  <div class="card-content">
                    <a-grid :cols="{ xs: 2, sm: 4, md: 4, lg: 4, xl: 5, xxl: 6 }" :colGap="20" :rowGap="16">
                      <template v-for="(data, key) in summary" :key="key">
                        <a-grid-item v-if="getSummaryTitle(key)" class="flex">
                          <div :class="[getSummaryCardColor(key)]" class="flex flex1">
                            <a-statistic :title="getSummaryTitle(key)" :value="data" :precision="0" :value-from="0"
                              :start="true" animation class="custom-statistic" :value-style="key == 'noPassCount' || key == 'noPassRate'
                                ? redValueStyle
                                : {}
                                ">
                            </a-statistic>
                          </div>
                        </a-grid-item>
                      </template>
                    </a-grid>
                  </div>
                </div>
              </a-spin>
            </a-card>
            <PlanSummary :data="summary"></PlanSummary>
            <GradeSummary ref="gradeChartRef" :search-param="searchGroupParam" :data="gradeData"></GradeSummary>
            <ProjectSummary ref="projectChartRef" :search-param="searchGroupParam" :data="projectData"></ProjectSummary>
            <ClassesSummary ref="classChartRef" :search-param="searchGroupParam" :data="gradeData"></ClassesSummary>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal v-model:visible="visible" width="900px" title="新增计划" :footer="null">
      <a-form ref="submitForm" size="large" :model="submitData" @submit-success="handleSubmitSuccess"
        :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }">
        <a-form-item field="name" label="计划名称" :rules="[{ required: true, message: '请输入计划名称' }]">
          <a-input v-model="submitData.name" placeholder="请输入计划名称" />
        </a-form-item>
        <a-form-item field="startDate" label="起止时间" :rules="[{ required: true, message: '请选择起止时间' }]">
          <a-range-picker disabled="" v-model="submitData.dates" @clear="clearDates" />
        </a-form-item>
        <a-form-item field="templateId" label="评分标准模板" :rules="[{ required: true, message: '请选择评分模板' }]">
          <a-select v-model="submitData.templateId" placeholder="请选择评分模板">
            <a-option v-for="item in templates" :key="item.id" :label="item.name" :value="item.id"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="schoolYear" label="体测计划所属学年" :rules="[{ required: true, message: '请先选择起止时间' }]">
          <a-input v-model="submitData.schoolYear" disabled style="margin-right: 16px"
            placeholder="自动根据计划起止时间生成，无需输入" />
          <a-popover position="rb">
            <icon-question-circle-fill size="20" style="color: #00aaff" />
            <template #content>
              <p>
                计划所属学年根据计划开始时间自动生成，修改体测计划开始时间可自动修改计划对应的学年
              </p>
              <p>
                例如：2022年9月1日之后，2023的9月1日之前，新增的体测计划为2022学年
              </p>
            </template>
          </a-popover>
        </a-form-item>
        <a-form-item field="planRuleType" label="成绩选取规则">
          <a-radio-group v-model="submitData.planRuleType">
            <a-radio value="1">最新成绩</a-radio>
            <a-radio value="2">最好成绩</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="testAddress" label="体测地点">
          <a-input v-model="submitData.testAddress" placeholder="请输入体测地点" />
        </a-form-item>
        <a-form-item class="custom-transfer disabled" field="selectClassesList" label="体测对象">
          <div>
            <a-card style="width: 400px">
              <a-tree :checkable="true" v-model:checked-keys="submitData.selectClassesList" blockNode
                checked-strategy="child" :fieldNames="{ key: 'id', title: 'name' }" :data="schoolData"
                default-expand-checked :expanded-keys="defaultExpandedkeys">
              </a-tree>
            </a-card>
          </div>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit" type="primary">保存</a-button>
            <a-button @click="() => {
              visible = false;
            }
              ">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="optionVisible" :title="optionTitle + '计划'" :footer="null">
      <a-form ref="optionForm" size="large" :model="optionData" @submit-success="handleSubmitOption">
        <a-form-item field="password" label="账号密码" :rules="[{ required: true, message: '请输入账号密码' }]">
          <a-input type="password" v-model.trim="optionData.password" placeholder="请输入账号密码" />
        </a-form-item>
        <a-form-item>
          <div style="color: red; font-size: 12px">
            注：请谨慎操作，将会 {{ optionTitle }}当前体测计划！
          </div>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">确认</a-button>
            <a-button @click="optionVisible = false">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="showResitVisible" width="850px" title="新增补考计划" :footer="null">
      <a-form ref="submitResitForm" size="large" :model="submitResitData" @submit-success="handleSubmitResit"
        :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }">
        <a-form-item field="name" label="计划名称" :rules="[{ required: true, message: '请输入计划名称' }]">
          <a-input v-model="submitResitData.name" placeholder="请输入计划名称" />
        </a-form-item>
        <a-form-item field="startDate" label="起止时间" :rules="[{ required: true, message: '请选择起止时间' }]">
          <a-range-picker v-model="submitResitData.dates" @change="startEndDateChange" />
        </a-form-item>
        <a-form-item label="选择补考学生" field="studyCodes">
          <div class="flex flex-column">
            <div style="margin-left: -15px;">
              <a-form :model="searchStdModel" layout="inline">
                <!-- <a-form-item field="studyCode">
                  <a-input v-model="searchStdModel.studyCode" allow-clear @press-enter="searchStudent"
                    style="width: 300px;" placeholder="请输入学籍号查询"></a-input>
                </a-form-item> -->
                <a-form-item>
                  <a-space>
                    <!-- <a-button type="primary" @click="searchStudent" :disabled="!searchStdModel.studyCode">查询</a-button> -->
                    <a-upload :custom-request="customRequest" size="mini" :show-file-list="false" />
                    <a-link href="./缓考学生导入.xlsx">下载导入模板</a-link>
                  </a-space>
                </a-form-item>
              </a-form>
            </div>
            <a-table row-key="studyCode" :columns="columns" :row-selection="rowSelection" :scroll="scroll"
              v-model:selectedKeys="selectedKeys" :loading="loadingStudent" :data="studentData"
              @page-change="pagination.pageChange" @page-size-change="pagination.pageSizeChange"
              :pagination="pagination" :bordered="false">
              <template #nation="{ record }">
                {{ getNationName(record.nation) }}
              </template>
              <template #sex="{ record }">
                {{ record.sex == "1" ? "男" : " 女" }}
              </template>
            </a-table>
          </div>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit" type="primary">保存</a-button>
            <a-button @click="() => {
              showResitVisible = false;
            }
              ">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="setCameraIpDialog" title="设置视频流服务器地址" @ok="updateCameraIp">
      <a-input v-model="submitCameraIpInfo.cameraIp" placeholder="请输入视频服务IP地址如（https://192.168.101.205）" />
    </a-modal>
  </div>
</template>
<style scoped>
.option-item {
  background-color: #f6f7fb;
  padding: 20px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-item:hover {
  box-shadow: 3px 3px 0 0 rgba(85, 66, 246, 0.3) !important;
  transform: scale(1.02);
}

.img-wrap {
  width: 65px;
  height: 65px;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-wrap img {
  /* scale: 1.2; */
  width: 100%;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-item .title {
  font-size: 20px;
  color: #1d2129;
  font-weight: 600;
  margin-bottom: 16px;
}

.option-item .content {
  padding-left: 16px;
}

.custom-transfer.disabled:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #f2f3f599;
}

.custom-transfer.disabled {
  cursor: not-allowed;
  position: relative;
}

.panel-col {
  padding-left: 43px;
  border-right: 1px solid rgb(var(--gray-2));
}

.arco-statistic-content .arco-statistic-value-integer {
  font-size: 24px !important;
  white-space: nowrap;
  font-weight: 700;
}

.h-icon {
  width: 54px;
  height: 54px;
  margin-right: 10px;
}
</style>